<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8"/>
    <title>layui</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/lib/layui-v2.5.4/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all"/>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .layuimini-main {
            margin: 0px 10px 10px 0px;
        }

        .layui-card-header {
            background-color: #cbddf3;
            padding: 5px;
            font-size: 14px;
            border: 1px solid #99bce8;
            box-shadow: #f3f7fb 0 1px 0px 0 inset;
            height: 20px;
            line-height: 20px;
        }

        .layui-table-tool {
            padding: 0px 5px;
            background-color: #d3e1f1;
            color: #0C0C0C;
            height: 36px !important;
            min-height: 32px !important;
            line-height: 32px;
            border-style: solid;
            border-color: #99bce8;
            border-width: 1px;
        }

        .layui-card-body {
            padding: 0 !important;
            margin: 0 !important;
            border-color: #99bce8;
            border-width: 1px;
            border-style: solid;
            background: #fff;
        }

        .layui-table-tool-temp {
            padding-right: 0px !important;
        }

        .layui-table-tool-temp .layui-btn, .layui-table-tool .layui-btn {
            border-color: #99bce8 !important;
            border-width: 1px !important;
            border-style: solid !important;
        }

        .layui-card-table {
            padding: 0 !important;
            margin: 0 !important;
        }

        .layui-table-view, .layui-table {
            margin: 0 !important;
        }

        .icon {
            margin-right: 10px;
            color: #1aa094;
        }

        .layui-table td, .layui-table th {
            position: relative;
            padding: 5px 10px;
            min-height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #0C0C0C;
        }

        .layui-table-view .layui-table[lay-size=sm] th .layui-table-cell {
            line-height: 30px;
            height: 30px;
            font-weight: bold;
            font-size: 12px;
        !important:;
        }

        .layui-table-view .layui-table td, .layui-table-view .layui-table th {
            padding: 0;
            border-top: none;
            border-left: none;
        }

        .search-header {
            height: 30px;
            margin: 0;
            padding: 0 5px;
            border-style: solid;
            border-color: #99bce8;
            border-width: 1px;
            background-color: #d3e1f1;
        }

        .search-input {
            vertical-align: middle;
            width: 120px;
            display: inline-block;
            height: 30px;
            font-size: 14px;
            border-color: #99bce8 !important;
            border-width: 1px !important;
            border-style: solid !important;
        }

        .layui-btn-search {
            background-color: #d3e1f1;
            color: #0C0C0C;
        }

    </style>
</head>
<body>
<div class="layuimini-container" style="height:calc(100%)">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space3">
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="fa fa-warning icon"></i>编码类型
                    </div>
                    <div class="layui-card-body">
                        <table id="codeTable" lay-filter="codeTable"></table>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm8 layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="fa fa-warning icon"></i>编码字典
                    </div>
                    <div class="layui-form layui-border-box layui-table-view">
                        <div class="search-header layui-table-tool">
                            <div class="layui-table-tool-temp">
                                <div class="layui-btn-group" style="display: inline-block">
                                    <input class="layui-input search-input" type="text" id="inputCode"
                                           placeholder="关键词搜索" autocomplete="off"></input>
                                    <button class="layui-btn layui-btn-sm layui-btn-primary tableSelect_btn_search"
                                            id="search">
                                        <i class="layui-icon layui-icon-search"></i>
                                    </button>
                                </div>
                                <div class="layui-btn-group">
                                    <button class="layui-btn layui-btn-sm data-refresh-btn layui-btn-primary"
                                            id="refresh"><i class="layui-icon layui-icon-refresh"></i></button>
                                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="addBdsCodeItemBtn"><i
                                            class="layui-icon layui-icon-add-1"></i></button>
                                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="uptBdsCodeItemBtn"><i
                                            class="layui-icon layui-icon-edit"></i></button>
                                    <button class="layui-btn layui-btn-sm layui-btn-primary data-delete-btn"
                                            id="delBdsCodeItemBtn"><i class="layui-icon layui-icon-delete"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body" style="height: auto">
                        <table id="codeTableItem"></table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div hidden="hidden" id="saveBdsCodeTableUi">
    <form class="layui-form" action="" lay-filter="saveBdsCodeTableForm" id="saveBdsCodeTableForm">
        <div style="padding-right: 20px">
            <div class="layui-form-item" style="margin-top:20px ">
                <label class="layui-form-label required">名称:</label>
                <div class="layui-input-block">
                    <input type="text" name="typeName" lay-verify="required" lay-reqtext="名称不能为空" value=""
                           class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">标准代码:</label>
                <div class="layui-input-block">
                    <input type="text" name="standardCode" lay-verify="required" lay-reqtext="标准代码不能为空" value=""
                           class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">排序:</label>
                <div class="layui-input-block">
                    <input type="number" name="itemIndex" value="" class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">标准版本:</label>
                <div class="layui-input-block">
                    <input type="text" name="standardVersion" value="" class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">来源:</label>
                <div class="layui-input-block">
                    <input type="number" name="source" value="" class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">备注:</label>
                <div class="layui-input-block">
                    <textarea name="descn" class="layui-textarea"></textarea>
                </div>
            </div>
            <input type="text" name="id" hidden></input>
        </div>
        <div style="padding-top: 5px;padding-bottom: 20px;">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="saveBtn">确认</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm" type="reset">重置</button>
            </div>
        </div>
    </form>
</div>

<div hidden="hidden" id="saveBdsCodeTableItemUi">
    <form class="layui-form" action="" lay-filter="saveBdsCodeTableItemForm" id="saveBdsCodeTableItemForm">
        <div style="padding-right: 20px">
            <div class="layui-form-item" style="margin-top:20px ">
                <label class="layui-form-label required">父级条目:</label>
                <div class="layui-input-block">
                    <input type="text" name="parentName" readonly disabled class="layui-input layui-disabled"></input>
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:20px ">
                <label class="layui-form-label required">条目名称:</label>
                <div class="layui-input-block">
                    <input type="text" id="itemName" name="itemName" lay-verify="required" lay-reqtext="条目名称不能为空"
                           value="" class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">条目值:</label>
                <div class="layui-input-block">
                    <input type="text" name="itemValue" lay-verify="required" lay-reqtext="条目值不能为空" value=""
                           class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">条目说明:</label>
                <div class="layui-input-block">
                    <input type="text" name="itemInstruction" value="" class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">排序:</label>
                <div class="layui-input-block">
                    <input type="number" name="itemIndex" value="" class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">拼音码:</label>
                <div class="layui-input-block">
                    <input type="text" name="spellCode" id='spellCode' value="" class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">五笔码:</label>
                <div class="layui-input-block">
                    <input type="text" name="wbCode" id="wbCode" value="" class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">备注:</label>
                <div class="layui-input-block">
                    <textarea name="descn" class="layui-textarea"></textarea>
                </div>
            </div>
            <input type="text" name="id" hidden></input>
            <input type="text" name="pId" hidden></input>
            <input type="text" name="tId" hidden></input>
        </div>
        <div style="padding-top: 5px;padding-bottom: 20px;">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm" type="reset">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-group" style="display: inline-block">
        <input class="layui-input search-input" type="text" name="inputCode" placeholder="关键词搜索"
               autocomplete="off"></input>
        <button class="layui-btn layui-btn-sm layui-btn-primary tableSelect_btn_search" lay-event="search">
            <i class="layui-icon layui-icon-search"></i>
        </button>
    </div>
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm data-refresh-btn layui-btn-primary" lay-event="refresh"><i
                class="layui-icon layui-icon-refresh"></i></button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add"><i
                class="layui-icon layui-icon-add-1"></i></button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="update"><i
                class="layui-icon layui-icon-edit"></i></button>
        <button class="layui-btn layui-btn-sm layui-btn-primary data-delete-btn" lay-event="delete"><i
                class="layui-icon layui-icon-delete"></i></button>
    </div>
</script>

<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/pinyin.js"></script>
<script>

    layui.use(['element', 'table', 'form'], function () {
        var $ = layui.jquery,
            element = layui.element,
            table = layui.table,
            form = layui.form
        ;

        let rowObj;
        let layerOpenIndex;
        var size = {
            width: window.innerWidth || document.body.clientWidth,
            height: window.innerHeight || document.body.clientHeight
        }

        $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {
            /*当单击表格行时,把单选按钮设为选中状态*/
            var tableDiv;
            var index = $(this).attr('data-index');
            var tableBox = $(this).parents('.layui-table-box');
            //存在固定列
            if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
                tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
            } else {
                tableDiv = tableBox.find(".layui-table-body.layui-table-main");
            }
            var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.layui-table-cell div.layui-form-radio I");
            if (checkCell.length > 0) {
                checkCell.click();
            }
        });
        //对td的单击事件进行拦截停止，防止事件冒泡再次触发上述的单击事件  将此代码在页面初始化后执行一次即可以。
        $(document).on("click", "td div.layui-table-cell div.layui-form-radio", function (e) {
            e.stopPropagation();
        });

        //单击行勾选checkbox事件
        $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {
            /*当单击表格行时,把单选按钮设为选中状态*/
            var tableDiv;
            var index = $(this).attr('data-index');
            var tableBox = $(this).parents('.layui-table-box');
            //存在固定列
            if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
                tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
            } else {
                tableDiv = tableBox.find(".layui-table-body.layui-table-main");
            }
            var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
            if (checkCell.length > 0) {
                checkCell.click();
            }
        });

        //对td的单击事件进行拦截停止，防止事件冒泡再次触发上述的单击事件
        $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
            e.stopPropagation();
        });


        $(function () {
            loadCodeTable();
            loadCodeTableItem();
        })

        function loadCodeTable() {
            //方法渲染：
            table.render({
                elem: '#codeTable',
                method: 'GET',
                url: '/bds/getBdsCodeTable',
                toolbar: '#toolbar',
                defaultToolbar: [],
                cols: [ [
                    {type: 'numbers', fixed: 'left'},
                    {field: 'typeName', title: '类型名称', sort: true},
                    {field: 'standardCode', title: '标准代码', sort: true},
                    {field: 'id', title: 'ID', sort: true, hide: true},
                    {field: 'standardVersion', title: '标准版本', sort: true, hide: true},
                    {field: 'source', title: '来源', sort: true, hide: true},
                    {field: 'itemIndex', title: '排序', sort: true, hide: true},
                    {field: 'descn', title: '备注', sort: true, hide: true}
                ] ],
                size: 'sm',   //尺寸
                skin: 'line',  //line （行边框风格）  row （列边框风格） nob （无边框风格)
                height: 'full-50',
                even: true,  //隔行背景
                done: function (obj) {
                    $("#codeTable").siblings("div").find("input[name='inputCode']").bind('keypress', function (event) {
                        if (event.keyCode == 13) {
                            $("#codeTable").siblings("div").find("input[name='inputCode']").next().click();
                        }
                    });
                }
            });
        }

        function loadCodeTableItem() {
            console.info(size);
            //方法渲染：
            table.render({
                elem: '#codeTableItem',
                method: 'GET',
                url: '/bds/getBdsCodeTableItem',
                cols: [ [
                    {type: 'radio', fixed: 'left'},
                    {field: 'itemName', title: '名称', sort: true},
                    {field: 'itemValue', title: '值', sort: true},
                    {field: 'itemFqn', title: '全路径', hide: (size.width < 500)},
                    {
                        field: 'isenabled', title: '是否启用', sort: true, templet: function (d) {
                            if (d.isenabled == '1') {
                                return '<a href="javascript:;" onclick="javascript:enabledTableItem(' + d.id + ',0)" style="color: blue;text-decoration:underline">启用</a>';
                            } else {
                                return '<a href="javascript:;" onclick="javascript:enabledTableItem(' + d.id + ',1)" style="color: red;text-decoration:underline">禁用</a>';
                            }
                        }
                    },
                    {field: 'spellCode', title: '拼音码', sort: true, hide: true},
                    {field: 'wbCode', title: '五笔码', sort: true, hide: true},
                    {field: 'id', title: 'ID', sort: true, hide: true},
                    {field: 'pId', title: '父级ID', sort: true, hide: true},
                    {field: 'tId', title: '目录ID', sort: true, hide: true},
                    {field: 'itemInstruction', title: '项目说明', sort: true, hide: true},
                    {field: 'itemIndex', title: '排序', sort: true, hide: true},
                    {field: 'descn', title: '备注', sort: true, hide: true}
                ] ],
                size: 'sm',   //尺寸
                skin: 'line',  //line （行边框风格）  row （列边框风格） nob （无边框风格)
                height: 'full-90',
                even: true,  //隔行背景
                done: function (obj) {
                    $("#codeTableItem").siblings("div").find("input[name='inputCode']").bind('keypress', function (event) {
                        if (event.keyCode == 13) {
                            $("#codeTableItem").siblings("div").find("input[name='inputCode']").next().click();
                        }
                    });
                }
            });
        }

        //监听行单击事件
        table.on('row(codeTable)', function (obj) {
            rowObj = obj.data;
            $(obj.tr).parent().children('.layui-table-click').removeClass('layui-table-click');
            obj.tr.addClass('layui-table-click');
            //执行搜索重载
            table.reload('codeTableItem', {
                where: {
                    tId: obj.data.id
                }
            });
        });

        window.enabledTableItem = function (obj, index) {
            // obj.isenabled = index ;
            $.ajax({
                url: '/bds/enabledTableItem',
                method: 'post',
                data: {
                    id: obj,
                    isenabled: index
                },
                success: function (obj1) {
                    table.reload('codeTableItem');
                }
            });
        }

        // 头部工具栏点击事件
        table.on('toolbar(codeTable)', function (obj) {
            switch (obj.event) {
                case 'refresh':
                    table.reload('codeTable', {
                        keyWords: ''
                    });
                    break;
                case 'add':
                    form.val('saveBdsCodeTableForm', {
                        id: null,
                        typeName: null,
                        standardCode: null,
                        standardVersion: null,
                        source: null,
                        itemIndex: null,
                        descn: null,
                    });
                    openSaveCodeTableUi("添加字典目录");
                    break;
                case 'update':
                    if (rowObj) {
                        form.val('saveBdsCodeTableForm', {
                            id: rowObj.id,
                            typeName: rowObj.typeName,
                            standardCode: rowObj.standardCode,
                            standardVersion: rowObj.standardVersion,
                            source: rowObj.source,
                            itemIndex: rowObj.itemIndex,
                            descn: rowObj.descn,
                        });
                        openSaveCodeTableUi("修改字典目录 - " + rowObj.typeName);
                    } else {
                        layer.alert('请先选择要修改的字典目录', {
                            icon: 2
                        })
                    }
                    break;
                case 'delete':
                    delCodeTableRequest();
                    break;
                case 'search':
                    let keyWords = $("#codeTable").siblings("div").find("input[name='inputCode']").val();
                    table.reload('codeTable', {
                        where: {
                            keyWords: keyWords
                        }
                    });
                    $("#codeTable").siblings("div").find("input[name='inputCode']").val(keyWords);
                    break;
            }
        });

        function delCodeTableRequest() {
            if (rowObj) {
                layer.confirm('确定要删除字典目录 ' + rowObj.typeName + ' ？', function () {
                    $.ajax({
                        url: '/bds/delCodeTable',
                        method: 'post',
                        data: {
                            id: rowObj.id
                        },
                        success: function (obj) {
                            if (obj.code == '0') {
                                layer.msg("删除成功！", {icon: 6, time: 3000})
                                table.reload('codeTable');
                            } else {
                                layer.alert(obj.msg, {
                                    icon: 2
                                })
                            }
                        }
                    });
                });
            } else {
                layer.alert('请先选择要删除字典目录', {
                    icon: 2
                })
            }
        }

        $('#refresh').on('click', function () {
            table.reload('codeTableItem', {
                keyWords: ''
            });
        });

        $('#search').on('click', function () {
            let keyWords = $("#inputCode").val();
            table.reload('codeTableItem', {
                where: {
                    keyWords: keyWords
                }
            });
            $("#inputCode").val(keyWords);
        });

        $('#inputCode').bind('keypress', function (event) {
            if (event.keyCode == 13) {
                $('#search').click();
            }
        });

        $('#addBdsCodeItemBtn').on('click', function () {
            if (rowObj) {
                $('#saveBdsCodeTableItemForm')[0].reset();
                form.render();
                // form.reset('saveBdsCodeTableItemForm');
                let row = table.checkStatus('codeTableItem').data[0];
                form.val('saveBdsCodeTableItemForm', {
                    parentName: row ? row.typeName : '无',
                    pId: row ? row.pId : '',
                    tId: rowObj.id
                });
                openSaveCodeTableItemUi("新增字典条目");
            } else {
                layer.alert('请先选择一项字典目录', {
                    icon: 2
                })
            }

        });

        $('#uptBdsCodeItemBtn').on('click', function () {
            let row = table.checkStatus('codeTableItem').data[0];
            if (row) {
                form.val('saveBdsCodeTableItemForm', {
                    id: row.id,
                    pId: row.pId,
                    tId: row.tId,
                    itemName: row.itemName,
                    itemValue: row.itemValue,
                    itemInstruction: row.itemInstruction,
                    itemIndex: row.itemIndex,
                    descn: row.descn,
                    spellCode: row.spellCode,
                    wbCode: row.wbCode
                });
                openSaveCodeTableItemUi("修改字典条目 - " + row.itemName);
            } else {
                layer.alert('请先选择要修改的字典条目', {
                    icon: 2
                })
            }
        });

        $('#delBdsCodeItemBtn').on('click', function () {
            let row = table.checkStatus('codeTableItem').data[0];
            if (row) {
                layer.confirm('确定要删除字典条目 ' + row.itemName + ' ？', function () {
                    $.ajax({
                        url: '/bds/delCodeTableItem',
                        method: 'post',
                        data: {
                            id: row.id
                        },
                        success: function (obj) {
                            if (obj.code == '0') {
                                layer.msg("删除成功！", {icon: 6, time: 3000})
                                table.reload('codeTableItem');
                            } else {
                                layer.alert(obj.msg, {
                                    icon: 2
                                })
                            }
                        }
                    });
                });
            } else {
                layer.alert('请先选择要删除的字典条目', {
                    icon: 2
                })
            }
        });

        function openSaveCodeTableUi(title) {
            layerOpenIndex = layer.open({
                type: 1,
                title: title,
                skin: 'layui-layer-lan',
                content: $("#saveBdsCodeTableUi")
            });
        }

        function openSaveCodeTableItemUi(title) {
            layerOpenIndex = layer.open({
                type: 1,
                title: title,
                skin: 'layui-layer-lan',
                content: $("#saveBdsCodeTableItemUi")
            });
        }

        form.on('submit(saveBdsCodeTableForm)', function () {
            var index = layer.msg('服务器处理中...', {
                icon: 16
                , shade: 0.08,
                time: 0
            });
            let obj = form.val('saveBdsCodeTableForm');
            if (!obj.spellCode) {
                obj.spellCode = makePy(obj.typeName);
            }
            $.ajax({
                url: "/bds/saveBdsCodeTable",
                type: "POST",
                data: obj,
                success: function (obj) {
                    layer.close(index);
                    if (obj.code == '0') {
                        layer.msg("保存成功！", {icon: 6, time: 3000})
                        table.reload('codeTable');
                    }
                }
            });
            layer.close(layerOpenIndex);
            return false;
        })

        form.on('submit(saveBdsCodeTableItemForm)', function () {
            var index = layer.msg('服务器处理中...', {
                icon: 16
                , shade: 0.08,
                time: 0
            });
            $.ajax({
                url: "/bds/saveBdsCodeTableItem",
                type: "POST",
                data: form.val('saveBdsCodeTableItemForm'),
                success: function (obj) {
                    layer.close(index);
                    if (obj.code == '0') {
                        layer.msg("保存成功！", {icon: 6, time: 3000})
                        table.reload('codeTableItem');
                    }
                }
            });
            layer.close(layerOpenIndex);
            return false;
        })

        //生成拼音码 五笔码
        $("#itemName").on("change", function (e) {
            $('#spellCode').val(makePy(e.target.value));
            $('#wbCode').val(makeWb(e.target.value));
        });
    });
</script>

</body>
</html>
